<!-- 打卡页面 -->
<template>
	<view>
		<!-- 用户信息时间等 -->
		<view class="titleRow">
			<view class="titleLeft">
				<image class="avatarUrl" :src="avatarUrl" mode=""></image>
				<view class="username">{{ nickname }}</view>
			</view>
			<view class="titleRight">
				<view @click="goRulesPage" style="color: #333;">考勤规则 ></view>
				<view>{{ dateNow }}</view>
			</view>
		</view>
		<!-- 打卡按钮 -->
		<view>
			<!-- 1上班打卡按钮 -->
			<button :disabled="submitDisable" class="punchCardBtn" v-if="btnStatusData.type == 1" @click="handlePunchCardClick">
				<!-- 遮罩层-内 -->
				<view class="textBox">
					<view class="punchStatus">上班打卡</view>
					<view class="punchtime">{{ time }}</view>
				</view>
				<view class="btnMaskOut"></view>
			</button>
			<!-- 2下班打卡按钮 -->
			<button :disabled="submitDisable" class="punchCardBtn" v-if="btnStatusData.type == 5 || btnStatusData.type == 6"
				@click="handlePunchCardClick">
				<!-- 遮罩层-内 -->
				<view class="textBox">
					<view class="punchStatus">下班打卡</view>
					<view class="punchtime">{{ time }}</view>
				</view>
				<view class="btnMaskOut"></view>
			</button>
			<!-- 3迟到打卡按钮 -->
			<button :disabled="submitDisable" class="punchCardBtn latePunch" v-if="btnStatusData.type == 2" @click="handlePunchCardClick">
				<!-- 遮罩层-内 -->
				<view class="textBox">
					<view class="punchStatus">迟到打卡</view>
					<view class="punchtime">{{ time }}</view>
				</view>
				<view class="btnMaskOut"></view>
			</button>
			<!-- 4外勤打卡按钮 -->
			<button :disabled="submitDisable" class="punchCardBtn outSide" v-if="btnStatusData.type == 7" @click="handlePunchCardClick">
				<!-- 遮罩层-内 -->
				<view class="textBox">
					<view class="punchStatus">外勤打卡</view>
					<view class="punchtime">{{ time }}</view>
				</view>
				<view class="btnMaskOut"></view>
			</button>
		</view>
		<!-- 是否进入考勤范围 -->
		<view class="punchStatusText">
			<view v-if="btnStatusData.type != 7" class="stext">
				<uni-icons color="#139cff" type="checkbox-filled" size="18"></uni-icons>
				<text style="margin-left: 10rpx;">您已进入考勤范围</text>
			</view>
			<view v-if="btnStatusData.type == 7" class="stext">
				<uni-icons color="#fb5b58" type="clear" size="18"></uni-icons>
				<text style="margin-left: 10rpx;">当前不在考勤范围内</text>
			</view>
			
		</view>
		<view v-if="btnStatusData.is_out_user==1" class="stext" style="text-align: center;font-size: 26rpx;color: #666;">
			您无需打卡
		</view>
		<view v-if="btnStatusData.is_holiday == 1" class="holiday">今天为节假日,无需打卡</view>
		<!-- 打卡流程 -->
		<view class="punchSetp">
			<view>
				<!-- 上班打卡 -->
				<view class="MyStep">
					<view class="stepLine"></view>
					<!-- 固定展示时间 -->
					<view class="stepRow1">
						<image class="stepIdot" src="../../../static/images/icon_jd1@2x.png" mode=""></image>
						<text class="stepdate">上班时间</text>
						<text class="stepdate" style="margin-left: 10rpx;">
							{{ btnStatusData.morning.work_shift }}
						</text>
					</view>
					<view class="stepRow2">
						<view v-if="btnStatusData.morning.is_leave == '1'">
							<view>
								<text class="stepusername" style="margin-right: 10rpx; margin-left: 50rpx;">
									{{ '请假中,无需打卡' }}
								</text>

								<text style="color:rgb(14, 163, 232); border-color: rgb(14, 163, 232);"
									class="statusTag">
									请假
								</text>
							</view>
						</view>
						<view v-else>
							<view v-if="btnStatusData.morning.is_record=='1'">
								<text class="stepusername" style="margin-right: 10rpx; margin-left: 50rpx;">
									{{ '打卡时间' }}
								</text>
								<text class="stepusername" style="margin-right: 20rpx;">
									{{ btnStatusData.morning.add_time }}
								</text>
								<text style="color:rgb(14, 163, 232); border-color: rgb(14, 163, 232);"
									class="statusTag"
									v-if="btnStatusData.morning.type=='1' || btnStatusData.morning.type=='6'">
									正常
								</text>
								<text style="color:#fc726e; border-color: #fc726e;" class="statusTag"
									v-if="btnStatusData.morning.type=='2'">
									迟到
								</text>
								<text style="color:#fc726e; border-color: #fc726e;" class="statusTag"
									v-if="btnStatusData.morning.type=='5'">
									早退
								</text>
								<text style="color:#4CD964; border-color: #4CD964;margin-left: 20rpx;" class="statusTag"
									v-if="btnStatusData.morning.is_outwork=='1'">
									外勤
								</text>
							</view>
							<view v-else>
								<view v-if="btnStatusData.morning.card_missing=='0'" class="waitPunch">待打卡</view>
								<view class="waitPunch" v-else>缺卡</view>
							</view>

						</view>
					</view>
				</view>
				<!-- 下班打卡 -->
				<view class="MyStep" style="margin-top: 100rpx;">
					<!-- 下班时间 -->
					<view class="stepRow1">
						<image class="stepIdot" src="../../../static/images/icon_jd1@2x.png" mode=""></image>
						<text class="stepdate">下班时间</text>
						<text class="stepdate" style="margin-left: 10rpx;">
							{{ btnStatusData.afternoon.closing_time }}
						</text>
					</view>
					<view class="stepRow2">
						<view v-if="btnStatusData.afternoon.is_leave == '1'">
							<view>
								<text class="stepusername" style="margin-right: 10rpx; margin-left: 50rpx;">
									{{ '请假中,无需打卡' }}
								</text>

								<text style="color:rgb(14, 163, 232); border-color: rgb(14, 163, 232);"
									class="statusTag">
									请假
								</text>
							</view>
						</view>
						<view v-else>
							<view v-if="btnStatusData.afternoon.is_record=='1'">
								<text class="stepusername" style="margin-right: 10rpx; margin-left: 50rpx;">
									{{ '打卡时间' }}
								</text>
								<text class="stepusername" style="margin-right: 20rpx;">
									{{ btnStatusData.afternoon.add_time }}
								</text>
								<text style="color:rgb(14, 163, 232); border-color: rgb(14, 163, 232);"
									class="statusTag"
									v-if="btnStatusData.afternoon.type=='1' || btnStatusData.afternoon.type=='6'">
									正常
								</text>
								<text style="color:#fc726e; border-color: #fc726e;" class="statusTag"
									v-if="btnStatusData.afternoon.type=='2'">
									迟到
								</text>
								<text style="color:#fc726e; border-color: #fc726e;" class="statusTag"
									v-if="btnStatusData.afternoon.type=='5'">
									早退
								</text>
								<text style="color:#4CD964; border-color: #4CD964; margin-left: 20rpx;"
									class="statusTag" v-if="btnStatusData.afternoon.is_outwork=='1'">
									外勤
								</text>
							</view>
							<view v-else>
								<view v-if="btnStatusData.afternoon.card_missing=='0'" class="waitPunch">待打卡</view>
								<view class="waitPunch" v-else>缺卡</view>
							</view>

						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 测试用时间按钮 -->
		<!-- <view>
			<uni-datetime-picker
				placeholder="请选择开始时间"
				v-model="testDate"
				@change='dateChange'
			/>
		</view>
		<view>
			纬度
			<input style="border:1px solid #333" type="text" v-model="locationData.latitude" />
		</view>
		<view>
			经度
			<input style="border:1px solid #333" type="text" v-model="locationData.longitude" />
		</view>
		<view @click='handleWeizhiClick'  style="width:200rpx;border: 1px solid #333;margin: 20rpx auto 200rpx;text-align: center;">确定</view> -->
		<!-- 底部按钮 -->
		<view class="btnRow">
			<view class="btn">
				<view class="btnColor">
					<uni-icons color="#fff" type="map" size="18"></uni-icons>
				</view>
				<text class="btnText">考勤打卡</text>
			</view>
			<view class="btn" @click="goAttendancePage">
				<view class="btnColor" style="background-color: #fff;">
					<uni-icons color="#333" type="compose" size="18"></uni-icons>
				</view>
				<text style="color:#333" class="btnText">考勤统计</text>
			</view>
			<view class="btn" @click="goHandlePunch">
				<view class="btnColor" style="background-color: #fff;">
					<uni-icons color="#333" type="map-pin-ellipse" size="18"></uni-icons>
				</view>
				<text style="color:#333" class="btnText">考勤处理</text>
			</view>
		</view>
		
		<!-- 外勤打卡弹窗 -->
		<uni-popup ref="outSide" type="dialog" :mask-click="true">
			<view class="popupPunch" style="position: relative; width: 100%;">
				<view class="closeIcon" @click="close">
					<image style="width:52rpx;height: 52rpx;" src="../../../static/images/Close_icon@2x.png"></image>
				</view>
				<scroll-view scroll-y class="punchDetails">
					<view class="container">
						<view class="punchTitle" v-if="btnStatusData.type=='5'">{{ '确定早退打卡吗' }}</view>
						<view class="punchTitle" v-if="btnStatusData.type=='7'">{{ '确定外勤打卡吗' }}</view>
						<view class="punchDiaTime">
							<text>打卡时间</text>
							<text>{{ time }}</text>
						</view>
						<textarea v-model="outRemark" class="texta" placeholder="请输入备注"
							placeholder-style="font-size:26rpx;color:#999" />
						<view class="textareaRemark">0/60字</view>
						<!-- 图片上传 -->
						<view class="upLoadImg">
							<view class="imgItem" style="margin-right: 10rpx;" v-for="item in imgList">
								<image @click="handleCheckOutImgItem(item)" class="imgItemI" :src="item"></image>
								<view class="closeBox" @click="removeImg(item)">
									<uni-icons type="closeempty" color="#fff" size="20"></uni-icons>
								</view>
							</view>
							<!-- 上传按钮 -->
							<view class="upLoadBtn" @click="selectImg" style="margin-right: 10rpx;">
								<uni-icons color="#999" type="plusempty" size="36"></uni-icons>
							</view>
						</view>
					</view>
				</scroll-view>
				<!-- 按钮行 -->
				<view class="popupBtnRow">
					<view style="background-color: #f38a1b;border-radius: 45rpx 0 0 45rpx;" class="btn" @click="close">
						取消
					</view>
					<button style="background-color: #139cff;border-radius: 0 45rpx 45rpx 0;" class="btn"
						:disabled="submitDisable"
						@click="handlePunchSubmit">
						确定
					</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	// import PunchButton from '@/components/PunchButton.vue';
	// **测试时间**
	import uniDatetimePicker from '../../components/uni-datetime-picker/uni-datetime-picker.vue';
	// **测试时间**
	import amap from '../../../common/amap-wx.js';
	export default {
		data() {
			return {
				submitDisable:false,
				tiemID: null,
				timeDou: 300,
				token: '',
				member_id: '',
				company_id: '',
				time: '',
				dateNow: '',
				nickname: '',
				avatarUrl: '',
				// 外勤备注
				outRemark: '',
				// 图片上传数组
				imgList: [],
				// 页面刷新的时间(记录超过30s不)
				pageTimeStart: '',
				locationData: {
					latitude: 0,
					longitude: 0,
					area_name: ''
				},
				btnStatusData: {
					morning: {
						work_shift: ''
					},
					afternoon: {
						closing_time: ''
					}

				},
				// testDate: '2021-07-08 09:20',
				testDate: '',
				timer: {},
				amapPlugin: null,
				// 王泽华高德key
				// key: '9a3ed6d9c57dab3ed9cdfa95f4d5d0ae',
				// 姚亚松高德key
				key:'69caaff8daafdc79c4b1f6f3ae16d475',
				addressName: '',
				isAprovel1: false,
				isAprovel2: false,
				isAprovel3: false,
			};
		},
		components: {
			uniDatetimePicker
		},
		onShow() {
			uni.getNetworkType({
				success: function (res) {
					console.log(res.networkType);
					if(res.networkType == 'none' || res.networkType == '2g'){
					return uni.showToast({
							title:'请检查网络连接',
							icon:'error',
							mask:true,
							success() {
								setTimeout(()=>{
									uni.navigateBack({
										delta:1
									})
								},1500)
								
							}
						})
					}
				}
			});
			
			setTimeout(()=>{
				// 判断打开应用的平台
				uni.getSystemInfo({
					  success: (res) => {
					  	// window | mac为pc端
					  	// android | ios为手机端
					    console.log('getSystemInfo,', res.platform);
						if(res.platform == 'windows' || res.platform == 'mac'){
							return uni.showToast({
								title:'请在手机端打开',
								icon:'error',
								mask:true,
								success() {
									setTimeout(()=>{
										uni.navigateBack({
											delta:1
										})
									},1500)
									
								}
							})
						}
					  }
					});
			},800)
			
			
			this.getTime();
			this.getMapLocation();
			this.getAprovelStatus();
			
		},
		onLoad() {
			this.amapPlugin = new amap.AMapWX({
				key: this.key
			});
			this.token = uni.getStorageSync('btlh_process_token') || '';
			this.member_id = uni.getStorageSync('btlh_process_member_id') || '';
			this.company_id = uni.getStorageSync('bthl_process_LoginCompanyId') || '';
			// this.getTime();
			// this.getMapLocation();
			// this.getAprovelStatus();
			// 获取用户头像 名字
			this.nickname = uni.getStorageSync('btlh_process_nickname') || '';
			this.avatarUrl = uni.getStorageSync('btlh_process_avatarUrl') || '';
		},

		mounted() {
			this.outRemark = '请输入';
			let timeout = setTimeout(() => {
				this.outRemark = '';
				clearTimeout(timeout);
			}, 500);
		},
		onHide() {
			clearInterval(this.timer);
		},
		onUnload() {
			clearInterval(this.timer);
		},
		onPullDownRefresh() {
			this.getTime()
			this.getMapLocation()
			uni.stopPullDownRefresh()
		},
		methods: {
			handleWeizhiClick() {
				console.log(this.locationData.longitude)
				this.getBtnStatus()
			},
			dateChange(data) {
				console.log('data', data)
				this.testDate = data
				console.log('this.testDate', this.testDate)
				this.getMapLocation()
			},
			// 请求获取打卡按钮状态
			async getBtnStatus() {
				const {
					data: res
				} = await this.$myRequest({
					url: 'ClockIn/index',
					method: 'POST',
					data: {
						member_id: this.member_id,
						token: this.token,
						company_id: this.company_id,
						lat: this.locationData.latitude,
						lng: this.locationData.longitude,
						// lat: '34.764015197753906',
						// lng: '113.6686019897461',

						// lat: '34.767802',
						// lng: '113.669552',
						time: this.testDate
					}
				});
				if (res.code != 200)
					return uni.showToast({
						title: res.datas.msg,
						icon: 'none'
					});
				this.btnStatusData = res.datas;
				console.log('请求获取的打卡按钮状态', this.btnStatusData)
			},
			goRulesPage() {
				uni.navigateTo({
					url: '/packageAdmin/pages/punchCard/attendanceRules'
				});
			},
			goHandlePunch() {
				uni.navigateTo({
					url: '/packageAdmin/pages/punchCard/handlePunch'
				});
			},
			goAttendancePage() {
				if (this.isAprovel3) {
					uni.navigateTo({
						url: `/packageAdmin/pages/punchCard/attendanceStatisticsClass`
					});
				} else {
					uni.navigateTo({
						url: '/packageAdmin/pages/punchCard/attendanceStatistics'
					});
				}
			},
			// 点击打卡按钮前判断是否为早退
			handlePunchCardClick() {
				// 点击打卡时,再次请求最新位置
				this.getMapLocation()
				
				
				if (this.btnStatusData.type == '5' || this.btnStatusData.type == '7') {
					this.$refs.outSide.open();
				} else {
					this.handlePunchSubmit()
				}
			},
			// 外勤(早退)打卡点击现实弹窗
			outSidePunchClick() {
				this.$refs.outSide.open();
			},
			// 打卡提交
			async handlePunchSubmit() {
				
				this.submitDisable = true;
				clearTimeout(this.tiemID);
				this.tiemID = setTimeout(async () => {
					console.log(123)
					const {
						data: res
					} = await this.$myRequest({
						url: 'ClockIn/sign',
						method: 'POST',
						data: {
							member_id: this.member_id,
							token: this.token,
							company_id: this.company_id,
							lat: this.locationData.latitude,
							lng: this.locationData.longitude,
							// lat: '34.764015197753906',
							// lng: '113.6686019897461',
							// lat: '34.767802',
							// lng: '113.669552',
							// #ifdef APP-PLUS
							area_name: this.locationData.area_name,
							// #endif
							// #ifdef MP-WEIXIN
							area_name: this.locationData.name,
							// #endif
							time: this.testDate,
							type: this.btnStatusData.type,
							remark: this.outRemark,
							pic: this.imgList.join(','),
						}
					});
					
					if (res.code != 200){
						this.submitDisable = false;
						return uni.showToast({
							title: res.datas.msg,
							icon: 'none'
						});
					}
						
					uni.showToast({
						title: res.datas.msg,
						icon: 'none'
					});
					this.close()
					// this.getTime()
					this.getMapLocation()
					this.submitDisable = false;
				}, this.timeDou);
			},
			// 外勤打卡弹窗关闭
			close() {
				this.$refs.outSide.close();
				this.outRemark = '';
				this.imgList = [];
			},
			//显示弹窗
			showPop() {
				if (!this.reason) {
					this.reason = '处理textarea默认样式不生效';
					let timeId = setTimeout(() => {
						this.reason = '';
						clearTimeout(timeId);
					}, 50);
				}
				this.isPop = true;
			},
			// 判断是不是审批人
			async getAprovelStatus() {
				const {
					data: res
				} = await this.$myRequest({
					url: 'ClockInApprove/is_approver',
					method: 'POST',
					data: {
						member_id: this.member_id,
						token: this.token,
						company_id: this.company_id
					}
				});
				if (res.code != 200)
					return uni.showToast({
						title: res.datas.msg,
						icon: 'none'
					});
				if (res.datas.is_department_head == '1') {
					this.isAprovel1 = true;
				}
				if (res.datas.is_department_head == '1' || res.datas.is_leave_admin == '1') {
					this.isAprovel2 = true;
				}
				if (res.datas.admin_state == '1' || res.datas.is_clockin_user == '1') {
					this.isAprovel3 = true;
				}
			},
			// 解析时间
			parseTime(time, fm) {
				// 解析时间  time: 时间戳或者实践对象 fm: 格式 默认是{y}-{m}-{d} {h}:{i}:{s}
				if (arguments.length === 0) {
					return null;
				}
				const format = fm || '{y}-{m}-{d} {h}:{i}:{s}';
				let date;
				if (typeof time === 'object') {
					date = time;
				} else {
					if (('' + time).length === 10) time = parseInt(time) * 1000;
					date = new Date(time);
				}
				const formatObj = {
					y: date.getFullYear(),
					m: date.getMonth() + 1,
					d: date.getDate(),
					h: date.getHours(),
					i: date.getMinutes(),
					s: date.getSeconds(),
					a: date.getDay()
				};
				const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
					let value = formatObj[key];
					if (key === 'a') return ['日', '一', '二', '三', '四', '五', '六'][value];
					if (result.length > 0 && value < 10) {
						value = '0' + value;
					}
					return value || 0;
				});
				return time_str;
			},
			// 获取当前时间
			getTime() {
				// 实时时间
				this.pageTimeStart = new Date();
				this.dateNow = this.parseTime(new Date(), '{y}/{m}/{d} 星期{a}');
				this.time = this.parseTime(new Date(), '{h}:{i}:{s}');
				clearInterval(this.timer);
				this.timer = setInterval(() => {
					// 如果当前页面停留超过30s
					if (new Date() - this.pageTimeStart >= 30000) {
						clearInterval(this.timer);
						uni.showModal({
							title: '在当前页面停留过长时间',
							content: '请点击刷新当前页面',
							cancelText: '返回', // 取消按钮的文字
							confirmText: '刷新', // 确认按钮文字
							success: res => {
								if (res.confirm) {
									// 刷新页面
									this.close()
									this.getTime();
									this.getMapLocation();
									this.getAprovelStatus();
								} else if (res.cancel) {
									this.close()
									this.getTime();
									this.getMapLocation();
									this.getAprovelStatus();
								}
							}
						});
					}
					this.time = this.parseTime(new Date(), '{h}:{i}:{s}');
				}, 1000);
			},

			/**
			 *  判断经纬度是否超出中国境内
			 */
			isLocationOutOfChina(latitude, longitude) {
				if (longitude < 72.004 || longitude > 137.8347 || latitude < 0.8293 || latitude > 55.8271)
					return true;
				return false;
			},
			transformLatWithXY(x, y) {
				var pi = 3.14159265358979324;
				var lat = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x));
				lat += (20.0 * Math.sin(6.0 * x * pi) + 20.0 * Math.sin(2.0 * x * pi)) * 2.0 / 3.0;
				lat += (20.0 * Math.sin(y * pi) + 40.0 * Math.sin(y / 3.0 * pi)) * 2.0 / 3.0;
				lat += (160.0 * Math.sin(y / 12.0 * pi) + 320 * Math.sin(y * pi / 30.0)) * 2.0 / 3.0;
				return lat;
			},

			transformLonWithXY(x, y) {
				var pi = 3.14159265358979324;
				var lon = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x));
				lon += (20.0 * Math.sin(6.0 * x * pi) + 20.0 * Math.sin(2.0 * x * pi)) * 2.0 / 3.0;
				lon += (20.0 * Math.sin(x * pi) + 40.0 * Math.sin(x / 3.0 * pi)) * 2.0 / 3.0;
				lon += (150.0 * Math.sin(x / 12.0 * pi) + 300.0 * Math.sin(x / 30.0 * pi)) * 2.0 / 3.0;
				return lon;
			},

			/**
			 *  将WGS-84(国际标准)转为GCJ-02(火星坐标):
			 */
			transformFromWGSToGCJ(latitude, longitude) {
				var lat = "";
				var lon = "";
				var ee = 0.00669342162296594323;
				var a = 6378245.0;
				var pi = 3.14159265358979324;

				if (this.isLocationOutOfChina(latitude, longitude)) {
					lat = latitude;
					lon = longitude;
				} else {
					var adjustLat = this.transformLatWithXY(longitude - 105.0, latitude - 35.0);
					var adjustLon = this.transformLonWithXY(longitude - 105.0, latitude - 35.0);
					var radLat = latitude / 180.0 * pi;
					var magic = Math.sin(radLat);
					magic = 1 - ee * magic * magic;
					var sqrtMagic = Math.sqrt(magic);
					adjustLat = (adjustLat * 180.0) / ((a * (1 - ee)) / (magic * sqrtMagic) * pi);
					adjustLon = (adjustLon * 180.0) / (a / sqrtMagic * Math.cos(radLat) * pi);
					latitude = latitude + adjustLat;
					longitude = longitude + adjustLon;
				}
				return {
					latitude: latitude,
					longitude: longitude
				};

			},

			// 获取当前经纬度(随后请求获取按钮信息)
			getMapLocation() {
				uni.showLoading({
					title: '获取信息中',
					mask:true
				});

				let that = this;
				//#ifdef APP-PLUS
				console.log('getLocation')
				// 获取位置坐标 坐标系为wgs84
				plus.geolocation.getCurrentPosition(function(res) {
					console.log(res)
					// 将wgs84坐标转换为gcj02
					let gcj02 = that.transformFromWGSToGCJ(res.coords.latitude, res.coords.longitude)
					that.locationData.latitude = gcj02.latitude;
					that.locationData.longitude = gcj02.longitude;
					console.log(that.locationData)
					// 根据gjc02经纬度使用腾讯获得位置信息
					uni.request({
						url: 'https://apis.map.qq.com/ws/geocoder/v1/?location=' + that.locationData
							.latitude + ',' + that.locationData.longitude +
							'&key=64VBZ-HFNC6-QARSB-ENTIP-IRD53-YUFXR',
						method: 'GET',
						header: {
							'content-type': 'application/x-www-form-urlencoded'
						},
						success: (res2) => {
							console.log(res2)
						},
						complete: (res3) => {
							console.log(res3);
							uni.hideLoading();
							that.locationData.area_name = res3.data.result.address;
							console.log(that.locationData.area_name)
							// 获取位置信息后请求后端获取按钮状态
							that.getBtnStatus();
						}
					});
				}, function(e) {
					console.log('Geolocation error: ' + e.message);
				}, );

				// #endif





				//#ifdef MP-WEIXIN
				this.amapPlugin.getRegeo({
					success: (data) => {
						console.log('高德获取位置信息', data)
						this.locationData = data[0];
						// 获取位置信息后请求后端获取按钮状态
						this.getBtnStatus();
						uni.hideLoading();
					},
					// 如果获取失败判断权限
					fail: () => {
						// 如果用uni.chooseLocation没有获取到地理位置，则需要获取当前的授权信息，判断是否有地理授权信息
						uni.getSetting({
							success: res => {
								var status = res.authSetting;
								if (!status['scope.userLocation']) {
									// 如果授权信息中没有地理位置的授权，则需要弹窗提示用户需要授权地理信息
									uni.showModal({
										title: '是否授权当前位置',
										content: '需要获取您的地理位置，请确认授权，否则地图功能将无法使用',
										success: tip => {
											if (tip.confirm) {
												// 如果用户同意授权地理信息，则打开授权设置页面，判断用户的操作
												uni.openSetting({
													success: data => {
														// 如果用户授权了地理信息在，则提示授权成功
														if (
															data
															.authSetting[
																'scope.userLocation'
																] ===
															true
														) {
															uni.showToast({
																title: '授权成功',
																icon: 'success',
																duration: 1000
															});
															// 授权成功后，然后再次chooseLocation获取信息
															uni.chooseLocation({
																success: res => {
																	console
																		.log(
																			'详细地址',
																			res
																			);
																	// this.getRegionFn(res);
																}
															});
														} else {
															uni.showToast({
																title: '授权失败',
																icon: 'none',
																duration: 1000
															});
														}
													}
												});
											}
										}
									});
								}
							},
							fail: res => {
								uni.showToast({
									title: '调用授权窗口失败',
									icon: 'none',
									duration: 1000
								});
							}
						});
					}
				});
				// 废弃方法
				return
				uni.getLocation({
					type: 'gcj02', //返回可以用于uni.openLocation的经纬度
					geocode: true,
					success: res => {
						console.log('位置信息', res);
						this.locationData = res;
						// 获取位置信息后请求后端获取按钮状态
						this.getBtnStatus();
					},
					// 如果获取失败判断权限
					fail: () => {
						// 如果用uni.chooseLocation没有获取到地理位置，则需要获取当前的授权信息，判断是否有地理授权信息
						uni.getSetting({
							success: res => {
								var status = res.authSetting;
								if (!status['scope.userLocation']) {
									// 如果授权信息中没有地理位置的授权，则需要弹窗提示用户需要授权地理信息
									uni.showModal({
										title: '是否授权当前位置',
										content: '需要获取您的地理位置，请确认授权，否则地图功能将无法使用',
										success: tip => {
											if (tip.confirm) {
												// 如果用户同意授权地理信息，则打开授权设置页面，判断用户的操作
												uni.openSetting({
													success: data => {
														// 如果用户授权了地理信息在，则提示授权成功
														if (
															data
															.authSetting[
																'scope.userLocation'
																] ===
															true
														) {
															uni.showToast({
																title: '授权成功',
																icon: 'success',
																duration: 1000
															});
															// 授权成功后，然后再次chooseLocation获取信息
															uni.chooseLocation({
																success: res => {
																	console
																		.log(
																			'详细地址',
																			res
																			);
																	// this.getRegionFn(res);
																}
															});
														} else {
															uni.showToast({
																title: '授权失败',
																icon: 'none',
																duration: 1000
															});
														}
													}
												});
											}
										}
									});
								}
							},
							fail: res => {
								uni.showToast({
									title: '调用授权窗口失败',
									icon: 'none',
									duration: 1000
								});
							}
						});
					}
				});
				//#endif
			},

			// 查看图片详情
			handleCheckOutImgItem(val) {
				uni.previewImage({
					current: val,
					urls: this.imgList,
					loop: true
				});
			},
			// 移除上传图片
			removeImg(item) {
				const index = this.imgList.findIndex(img => img == item);
				// console.
				if (index != -1) {
					this.imgList.splice(index, 1);
				}
			},
			// 上传图片
			selectImg() {
				var that = this;
				uni.chooseImage({
					count: 6, // 最多可以选择的图片张数，默认9
					sizeType: ['original', 'compressed'], //original 原图，compressed 压缩图，默认二者都有
					sourceType: ['album', 'camera'], //album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
					success: async res => {
						const tempFilePaths = res.tempFilePaths;
						that.phone = res.tempFilePaths[0];
						tempFilePaths.forEach(item => {
							uni.uploadFile({
								url: 'https://control.sxpz.vip/index.php/AppApi/User/uploadImg',
								filePath: item,
								name: 'file',
								formData: {
									member_id: this.member_id,
									token: this.token,
									company_id: this.company_id
								},
								success: uploadFileRes => {
									const result = JSON.parse(uploadFileRes.data);
									console.log(result);
									if (result.code != 200)
										return uni.showToast({
											title: result.datas.msg,
											icon: 'none'
										});
									this.imgList.push(result.datas.img_url);
									console.log(this.imgList);
								}
							});
						});
					}
				});
			}
		},
	};
</script>

<style lang="scss" scoped>
	page{
		width: 100%vw;
		height: 100%vh;
	}
	
	
	// 顶部头像信息等
	.titleRow {
		display: flex;
		justify-content: space-between;
		padding: 30rpx 20rpx 10rpx;
		border-bottom: 1px solid #efefef;

		.titleLeft {
			display: flex;
			align-items: center;

			.avatarUrl {
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
				margin-right: 10rpx;
			}

			.username {
				font-size: 28rpx;
				color: #000;
			}
		}

		.titleRight {
			text-align: right;
			font-size: 26rpx;
			color: #666;
		}
	}

	// 打卡按钮
	.punchCardBtn {
		border: none;
		position: relative;
		width: 230rpx;
		height: 230rpx;
		margin: 80rpx auto 50rpx;
		padding: 0;
		overflow:visible;
		background-color: #139cff!important;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
		outline: none;
		.textBox {
			position: relative;
			text-align: center;
			z-index: 3;
		}

		.punchStatus {
			color: #fff!important;
			height: 60rpx;
			font-weight: 700;
			font-size: 36rpx;
		}

		.punchtime {
			color: #fff!important;
			height: inherit;
			font-size: 28rpx;
		}

		.btnMaskOut {
			position: absolute;
			width: 100%;
			height: 100%;
			background-color: #053453;
			border-radius: 50%;
			opacity: 0.3;
			animation: myfirst 1.5s infinite linear;
		}
	}
.punchCardBtn::after{
	border: none;
	overflow:visible;
}
	.outSide {
		background-color: #45e2c4!important;

		.btnMaskOut {
			position: absolute;
			width: 100%;
			height: 100%;
			background-color: #98eedd;
			border-radius: 50%;
			opacity: 0.3;
			animation: myfirst2 1.5s infinite linear;
		}
	}

	.latePunch {
		background-color: #fc7674;

		.btnMaskOut {
			position: absolute;
			width: 100%;
			height: 100%;
			background-color: #fb5b58;
			border-radius: 50%;
			opacity: 0.3;
			animation: myfirst3 1.5s infinite linear;
		}
	}

	.punchStatusText {
		display: flex;
		justify-content: center;
		align-items: center;
		color: #666;
		font-size: 24rpx;

		.stext {
			display: flex;
			align-items: center;
		}
	}

	.punchSetp {
		display: flex;
		justify-content: center;
		margin-top: 8vh;

		.MyStep {
			position: relative;

			.stepLine {
				position: absolute;
				width: 2px;
				height: 222rpx;
				left: 12rpx;
				top: 22rpx;
				background-color: #40a0f2;
			}

			.stepRow1 {
				display: flex;
				align-items: center;

				.stepIdot {
					width: 26rpx;
					height: 26rpx;
					margin-right: 20rpx;
				}

				.stepdate {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #999;
				}
			}

			.waitPunch {
				color: #999;
				font-size: 26rpx;
				margin-left: 50rpx;
			}

			.stepRow2 {
				height: 84rpx;
				display: flex;
				align-items: center;

				.stepusername {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;

					font-size: 36rpx;
					font-weight: 700;
				}

				.statusTag {
					border: 1rpx solid;
					padding: 0 10rpx;
					font-size: 24rpx;
					border-radius: 10rpx;
				}

				.stepstatus {
					margin: 20rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #19af3c;
				}
			}
		}
	}

	.btnRow {
		position: fixed;
		bottom: 0;
		width: 100vw;
		display: flex;
		justify-content: space-around;

		.btn {
			display: flex;
			flex-direction: column;
			align-items: center;

			.btnColor {
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
				background-color: #139cff;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.btnText {
				font-size: 26rpx;
				font-weight: 700;
				color: #139cff;
				margin-top: 10rpx;
				margin-bottom: 20rpx;
			}
		}
	}

	// 弹窗
	.popupPunch {
		background-color: #fff;
		border-radius: 20rpx;
		width: 630rpx;

		.closeIcon {
			position: absolute;
			width: 52rpx;
			height: 52rpx;
			top: -70rpx;
			right: 0;
		}

		.punchDetails {
			width: 630rpx;
			max-height: 750rpx;

			.container {
				padding: 40rpx 50rpx;
				box-sizing: border-box;
			}

			.punchTitle {
				text-align: center;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
			}

			.punchDiaTime {
				text-align: center;
				margin-top: 40rpx;
				font-size: 24rpx;
				color: #666;
			}

			.punchInfo {
				margin-top: 30rpx;
				font-size: 24rpx;
				color: #666;
			}

			/deep/.texta {
				box-sizing: border-box;
				width: 530rpx;
				font-size: 28rpx;
				height: 255rpx;
				background: #f7f7f7;
				// margin:0 auto;
				margin-top: 60rpx;
				padding: 30rpx;
			}

			.textareaRemark {
				text-align: right;
				font-size: 26rpx;
				color: #999;
				margin-top: 10rpx;
				margin: 40rpx;
			}

			// 上传图片
			.upLoadImg {
				display: flex;
				flex-wrap: wrap;

				.upLoadBtn {
					width: 120rpx;
					height: 120rpx;
					border-radius: 10rpx;
					border: 1px solid #999;
					display: flex;
					justify-content: center;
					align-items: center;
				}

				.imgItem {
					position: relative;
					width: 120rpx;
					height: 120rpx;
					margin-bottom: 20rpx;

					.imgItemI {
						width: 120rpx;
						height: 120rpx;
					}

					.closeBox {
						width: 30rpx;
						height: 30rpx;
						position: absolute;
						background-color: #007aff;
						display: flex;
						justify-content: center;
						align-items: center;
						right: 0;
						top: 0;
					}
				}
			}
		}

		.popupBtnRow {
			width: 630rpx;
			display: flex;
			justify-content: center;

			.btn {
				height: 90rpx;
				width: 200rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
				margin: 40rpx 0;
			}
		}
	}

	.holiday {
		width: 100%;
		text-align: center;
		margin-top: 30rpx;
		font-size: 36rpx;
		font-weight: 700;
	}

	@keyframes myfirst {
		20% {
			transform: scale(0);
		}

		40% {
			transform: scale(0.33);
		}

		60% {
			transform: scale(0.66);
		}

		80% {
			transform: scale(1);
		}

		100% {
			transform: scale(1.3);
			background-color: #139cff;
		}
	}

	@keyframes myfirst2 {
		20% {
			transform: scale(0);
		}

		40% {
			transform: scale(0.33);
		}

		60% {
			transform: scale(0.66);
		}

		80% {
			transform: scale(1);
		}

		100% {
			transform: scale(1.3);
			background-color: #98eedd;
		}
	}

	@keyframes myfirst3 {
		20% {
			transform: scale(0);
		}

		40% {
			transform: scale(0.33);
		}

		60% {
			transform: scale(0.66);
		}

		80% {
			transform: scale(1);
		}

		100% {
			transform: scale(1.3);
			background-color: #fdadac;
		}
	}
</style>
